<template>
  <a-layout-sider :collapsed="false" :trigger="null" collapsible>
    <div class="logo">
      <span>商品管理系统</span>
    </div>
    <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
      <a-menu-item key="1">
        <BankOutlined />
        <router-link to="/admin/home">
          <span> &nbsp;商品首页</span></router-link
        >
      </a-menu-item>
      <a-menu-item key="2">
        <BarsOutlined />
        <router-link to="/admin/classes"
          ><span> &nbsp;分类管理</span></router-link
        >
      </a-menu-item>
      <a-menu-item key="3">
        <ShopOutlined />
        <router-link to="/admin/product"
          ><span> &nbsp;商品管理</span></router-link
        >
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { ref } from "vue";
import {
  BankOutlined,
  BarsOutlined,
  ShopOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "Sider",
  components: {
    BankOutlined,
    BarsOutlined,
    ShopOutlined,
  },
  setup() {
    return {
      selectedKeys: ref(["1"]),
    };
  },
};
</script>

<style>
</style>